<template>
  <base-container>
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="searchParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    />
    <base-table-card>
      <!-- 表格 -->
      <avue-crud
        ref="crudRef"
        :option="tableOption"
        :data="tableData"
        v-model="formData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
      >
        <template #menu="{ row }">
          <el-button type="primary" text @click="openEditDialog(row)">编辑</el-button>
          <el-button type="primary" text :loading="row._sendLoading" @click="onSend(row)"> 发送 </el-button>
          <el-button type="info" text @click="loadDel(row)">删除</el-button>
        </template>
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import Option from "@/crudOption/order/buyout.js";
  const { searchOption, tableOption } = Option();
  const crudRef = ref(null);
  let {
    data: tableData,
    loading: tableLoading,
    page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    del: loadDel,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.service.GetServiceContentPage,
    add: Api.service.AddServiceCategory,
    edit: Api.service.EditServiceContent,
    del: Api.service.DelServiceContent,

    // 若后端为 {code,message,data:{rows,total}} 可开启：
    dataRes: "data.records",
    totalRes: "data.total",

    // 删除确认提示词
    delConfirm: {
      type: "warning",
      title: "删除确认",
      content: "确定要删除该内容吗？删除后用户将不能查看。",
      confirmText: "确定",
      cancelText: "取消",
    },
    search: {},
  });
</script>
<style lang="scss" scoped></style>
